<template>
  <view class="albun-list-container">
    <view
      v-for="item in albumListData"
      :key="item.id"
      class="albun-list-item">
      <Title :title="item.name"
        :custom-style="{
          'marginBottom': '24rpx',
          'fontSize': '28rpx',
          'fontWeight': '400',
          'color': '#4b4b5c'
        }">
        <view v-if="item.is_top === '1'" slot="left" class="is_top">
          置顶
        </view>
        <view @click="handleEditAlbum(item)" class="create-album">
          <u-icon name="edit-pen" color="#56d39d" size="28"></u-icon>
          <text>编辑</text>
        </view>
      </Title>
      <view class="artworks-content" @click="handleAlbumDetail(item)">
        <block
          v-for="(artworksItem, index) in item.artworksInfo"
          :key="artworksItem.id">
          <view
            v-if="index < 4"
            class="artworks-item">
            <u-image
              v-if="(artworksItem.type != 4 && artworksItem.type != 8)"
              width="149rpx"
              height="149rpx"
              :lazy-load="true"
              :fade="false"
              :border-radius="0"
              :show-menu-by-longpress="false"
              :src="artworksItem.wx_cover_url || artworksItem.cover_url"
              class="image">
              <u-loading slot="loading" color="#56d39d" size="36"></u-loading>
            </u-image>
            <block v-else>
              <u-image
                width="149rpx"
                height="149rpx"
                :lazy-load="true"
                :fade="false"
                :border-radius="0"
                :show-menu-by-longpress="false"
                :src="`${artworksItem.cover_url}?vframe/jpg/offset/1`"
                class="image">
                <u-loading slot="loading" color="#56d39d" size="36"></u-loading>
              </u-image>
              <image
                src="@/static/image/play.png"
                mode="scaleToFill"
                class="play-icon"
              />
            </block>
            <view v-if="index === 3 && (item.artworksInfo.length - 4) > 0" class="artworks-num">+{{ item.artworksInfo.length - 4 }}</view>
          </view>
        </block>
        <!-- 添加作品 -->
        <view v-if="item.artworksInfo.length === 0" @click.stop="uploadArtworks(item)" class="add-artworks">
            <u-icon name="arrow-upward" color="#56d39d" size="28"></u-icon>
            <text class="bottom-view-button-text">上传作品</text>
        </view>
      </view>
    </view>
    <!-- 编辑专辑 -->
    <EditArtworksAlbum
      :popup-show="editAlbum.popupShow"
      :popup-title="editAlbum.popupTitle"
      :album-info="editAlbum.albumInfo"
      @close="close"
      @success="editSuccess"></EditArtworksAlbum>
  </view>
</template>

<script>
import Title from '@/components/title/title';
import EditArtworksAlbum from '@/components/createArtworksAlbum/createArtworksAlbum';
import { mapGetters } from 'vuex';
export default {
  components: {
    Title,
    EditArtworksAlbum
  },
  props: {
    albumList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      albumListData: this.albumList,
      editAlbum: {
        popupShow: false,
        popupTitle: '编辑专辑',
        albumInfo: {
          id: '', // 专辑id
          name: '', // 专辑名称
          is_top: '', // 是否置顶
          author_id: '', // 主页id
          artworks_type_id: '' // 作品类型
        }
      },
    }
  },
  computed: {
    ...mapGetters([
      'artworksTypeAllListData',
    ])
  },
  watch: {
    albumList: {
      immediate: true,
      handler(val, oldValue) {
        this.albumListData = val;
      }
    },
  },
  methods: {

    // 编辑专辑
    handleEditAlbum(itemData) {
      this.editAlbum.albumInfo.id = itemData.id;
      this.editAlbum.albumInfo.name = itemData.name;
      this.editAlbum.albumInfo.is_top = itemData.is_top;
      this.editAlbum.albumInfo.author_id = itemData.author_id;
      this.editAlbum.albumInfo.artworks_type_id = itemData.artworks_type_id;
      this.editAlbum.popupShow = true;
    },

    // 编辑成功
    editSuccess() {
      this.$emit('editAlbumSuccess')
    },

    // 关闭
    close() {
      this.editAlbum.albumInfo.id = '';
      this.editAlbum.albumInfo.name = '';
      this.editAlbum.albumInfo.is_top = '';
      this.editAlbum.albumInfo.author_id = '';
      this.editAlbum.albumInfo.artworks_type_id = '';
      this.editAlbum.popupShow = false;
    },

    // 上传作品到该专辑
    uploadArtworks(itemData) {
      if(itemData.author_id) {
        uni.navigateTo({
          url: `/pages/publish/publish?author_id=${itemData.author_id}&currentArtworksType=0&album_id=${itemData.id}`
        })
      } else {
        uni.showToast({
          title: '请选择对应的达人主页。',
          icon: 'none'
        })
      }
    },

    // 点击专辑详情
    handleAlbumDetail(itemData) {
      uni.navigateTo({
        url: `/pages/artworks/albumArtworksList?author_id=${itemData.author_id}&type=${itemData.artworks_type_id}&album_id=${itemData.id}&album_name=${itemData.name}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .albun-list-container{
    padding: 32rpx 32rpx 100rpx 32rpx;

    .albun-list-item{
      padding: 24rpx;
      border-radius: 16rpx;
      box-shadow: 0rpx 1rpx 10rpx 2rpx #d5dcf0;
      margin-bottom: 24rpx;

      .create-album{
        position: absolute;
        right: 0;
        top: 0;
        margin: auto;
        font-size: 26rpx;
        font-weight: 400;
        color: $uni-color-primary;
        padding: 6rpx 24rpx;
        border-radius: 24rpx;
      }

      .artworks-content{
        padding: 12rpx 0;
        display: flex;
        flex-wrap: wrap;

        .artworks-item{
          width: 149rpx;
          height: 149rpx;
          position: relative;
          border-radius: 8rpx;
          overflow: hidden;
          margin-right: 8rpx;
          margin-left: 7.5rpx;
          border: 1rpx solid #eaeaea;
        }

        .play-icon{
          position: absolute;
          width: 60rpx;
          height: 60rpx;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          border-radius: 50%;
          background: rgba($color: #000000, $alpha: .5);
        }

        .add-artworks{
          margin: 24rpx auto;
          background-color: #f3f7fb;
          padding: 12rpx 24rpx;
          border-radius: 32rpx;
          color: $uni-color-primary;
          font-size: 24rpx;
        }

        .artworks-item:nth-child(4n - 3) {
          margin-left: 0;
        }

        .artworks-item:nth-child(4n) {
          margin-right: 0;
        }

        .artworks-num{
          position: absolute;
          right: 0;
          top: 0;
          padding: 6rpx 16rpx;
          text-align: center;
          background: rgba(000, 000, 000, .6);
          color: #fff;
          border-radius: 0 8rpx 0 20rpx;
          font-size: 24rpx;
        }
      }

      .is_top{
        text-align: center;
        width: 70rpx;
        height: 36rpx;
        line-height: 36rpx;
        font-size: 24rpx;
        color: #fff;
        border-radius: 6rpx;
        margin-left: 12rpx;
        background-color: $uni-color-primary2;
      }
    }
  }
</style>
